CSS 是作為一名網頁開發人員，必須要學習的語言，近幾年來，Tailwind CSS 逐漸成為 CSS 框架的主流，Tailwind CSS 是一種以實用優先 (Utility-first) 的 CSS 框架，原子化 CSS (Atomic CSS) 的一個實現，與傳統的 CSS 框架如 Bootstrap 不同，Tailwind CSS 不提供一整套預先定義的 UI 元件或抽象化的類別名稱，而是提供了一堆能夠組成 CSS 規則的類別標記，提供我們在元素類別中做撰寫，網頁可以靠著 Tailwind CSS 可以很快速的來堆疊元素與樣式，不必再煩惱抽象化類別或客製化 UI 的窘境。

都是為了解決開發上的體驗

Master CSS 與 Tailwind CSS 具備有許多相似的地方，但是嚴謹一點來說，Tailwind CSS 所做到的事情，只佔 Master CSS 一部分，Master CSS 不僅僅只是原子化 CSS (Atomic CSS)，更是一個能夠增強 CSS 使用的 CSS 標記語言，它的最終目的是為了讓 HTML 和 CSS 更加無縫，以解決開發上的不適。

更少的學習時間

現在市場上有許多 Atomic CSS、Utilities-first CSS 的實現框架，但往往因為框架內自訂了許多類別名稱與原生 CSS 有一些分別，導致了學習上需要記憶這些類別你才能開始使用，如果你有學習或使用過 Tailwind CSS，肯定翻了不少文件查了不少類別樣式對照表吧！

Master CSS 在類別標記的使用上，可以做到與原生 CSS 相同的聲明方式甚至原生的行為，只要你會寫原生 CSS，在你初次使用 Master 時，在類別的標記上基本不需要學習就可以開始在類別名稱中做標記，而當你需要進一步優化或減少類別標記時的名稱，可以透過 Master CSS 所提供的縮寫、速記簡寫甚至是語意的類別名稱，來快速的聲明樣式類別。

更快的即時編譯時間

Tailwind CSS v2.1 版本，導入了 JIT 即時編譯，讓 Tailwind CSS 具有可以自訂 CSS、直接使用任意的 Variants 以及能夠更快建構樣式等，甚至解決了開發與生產環境可能發生類別名稱消失的問題。

而 Master CSS 也支援 JIT 的即時編譯，甚至在單一類別的生成能夠快上數十倍以上，而且 Master CSS 也具備有靈活的配置可以依據實際情境與配合的前端框架，來選擇不同的編譯或渲染模式。

渲染模式與編譯方式

Tailwind CSS 依賴著 PostCSS 在最終專案建構打包時，依照專案內所使用到的類別來進行類別的產生。

Master CSS 也在 v2 版本支援在建構打包時，進行靜態提取，將專案內使用到的類別產生出虛擬 CSS 模組或檔案提供給網站做使用。

而 Tailwind CSS 與 Master CSS 所支援的 JIT 即時編譯，其實也有實際上的差異，Tailwind CSS 的 JIT 只能夠在開發時期做使用，最終建構打包後這些被使用的類別都將產生為 CSS，前端使用時也無法使用那些沒有被打包進 CSS 樣式中的類別來使用樣式。

Master CSS 的 JIT 即時編譯，能夠在開發與生產環境時，載入渲染核心觀察網頁 DOM Three 中類別名稱的變化，並即時的產生對應的 CSS，以此便能實現動態賦予類別標記並套用樣式的效果，算是更名符其實的即時編譯與渲染。

Master CSS 更提供了一種渲染模式——漸進式渲染（Progressive Rendering），讓網站部署時可以先進行靜態提取類別樣式，前端瀏覽器繪製時就可以更快的套用樣式規則，而同時前端也會非同步的載入 Master CSS 核心，在前端的 JS 程式碼為網頁中的類別名稱做任何的調整，都能像 JIT 即時編譯的模式來立即的產生 CSS 規則並添加至樣式表中做套用。

更小的導入成本

Tailwind CSS 同常與 PostCSS 做使用，打包建構時會經過預處理來產生最終的 CSS 檔案，這意味著伺服器需要負擔這些檔案的傳輸成本。

而 Master CSS 透過 JavaScript 所實現的渲染核心，可以在瀏覽器即時的產生這些樣式，這個核心的 JavaScript 的檔案大小只有不到 20KB，你就能擁有比 Tailwind CSS 更優秀的渲染效能與動態賦值等效果。

更多豐富的與實用的設計

Master CSS 得益於依賴原生的 CSS 寫法與行為，在許多功能上可以做得比 Tailwind CSS 更好與更多，Master CSS 現在的版本具備了以下實用的特性，是在 Tailwind CSS 上比較難實踐的：

• 可以使用原生的 CSS 與自訂類別屬性來使用本地或尚未添加的 CSS 屬性
• 動態的類別名稱調整，能夠即時的產生樣式並套用
• Master CSS 的 CSS 規則相較於 Tailwind CSS 更短更實用
• 幾乎不會發生要語意不語意的情況，例如 Tailwind CSS leading-6 可能需要查表才會知道表示 line-height: 1.5rem
• Master CSS 不像 Tailwind CSS 使用了大量的 Variables 導致瀏覽器計算樣式成本增加
• 具備開箱即用的類別群組功能
• 具備 Shadow DOM 與子元素的控制能力
• etc.

主流框架比較

總結

Tailwind CSS 是一個很不錯的框架，它所提供的功能確實打到了許多開發者的痛點，因此才造就了現在的地位，Master CSS 雖然現在還處於 v2 的測試版，但是功能方面已經非常強大，如果你在 Tailwind CSS 上有遇到一些問題或想嘗試新的 CSS 撰寫方式，推薦你可以使用 Master CSS。

如果你還在觀望那麼我能跟你說的是，前端的工具會越來越好，我們要學習的東西也持續在進步，既然你都使用過 Tailwind CSS 了，何不嘗試看看 Master CSS 呢？Master CSS 更多的實用功能與酷炫的設計也在未來會持續地釋出，不用再猶豫了，現在！就是加入 Master CSS 的時刻。

期望這個由🇹🇼台灣團隊所開發的 Master CSS 能夠撼動 Tailwind CSS 的地位，相信 Master CSS 也能成為下一代 CSS 的解決方案！